import React, { Component } from 'react';
import { Modal, Form, Input,Select,Row, Col } from 'antd';
import { connect } from 'dva';

const FormItem = Form.Item;
const { TextArea } = Input;

class StockRequireApplyAddDialog extends Component {

  componentDidMount = () => {
    this.props.dispatch({
      type: 'stockrequireapply/loadWidgetData'
    });
  }

  showModelHandler = e => {
    if (e) e.stopPropagation();
    this.props.dispatch({
      type:'stockrequireapply/trggleDialog',
      payload:true
    });
  };

  hideModelHandler = () => {
    this.form.resetFields();
    this.props.dispatch({
      type:'stockrequireapply/trggleDialog',
      payload:false
    });
  };

  okHandler = () => {
    this.form.validateFields()
    .then(values => {
      this.form.resetFields();
      this.props.dispatch({
        type:'stockrequireapply/create',
        payload:values
      });
    })
    .catch(info => {
      console.log('Validate Failed:', info);
    });
  };


  render() {
    const { children,dialogVisiable ,currData} = this.props;
    console.log(currData);
    const { uomList,mimList,deptList } = this.props;
    const formItemLayout = {
        labelCol: {
            span: 6
        },
        wrapperCol: {
             span: 18
        },
    };

    return (
      <div>
        <span onClick={this.showModelHandler}>{children}</span>
        <Modal
          title="发起物品申请"
          visible={dialogVisiable}
          onOk={this.okHandler}
          onCancel={this.hideModelHandler}
          width={1000}
          okText="确定"
          cancelText="取消"
          //initialValues={}
        >
        <Form layout="horizontal" ref={(c) => this.form = c}>
            <Row gutter={16}>
                <Col className="gutter-row" span={8}>
                    <FormItem label="卡号" name="cardNo" {...formItemLayout} initialValue={currData === null ? '' : currData.cardNo}  rules={[{ required: true, message: '请填写卡号!' }]}   >
                        <Input placeholder="输入卡号"/>
                    </FormItem>
                </Col>
                <Col className="gutter-row" span={8}>
                    <FormItem label="患者姓名" {...formItemLayout} name="patName" rules={[{ required: true, message: '请填写患者姓名!' }]}  >
                        <Input placeholder="患者姓名" />
                    </FormItem>
                </Col>
                <Col className="gutter-row" span={8}>
                    <FormItem label="消耗项目" {...formItemLayout} name="mim" rules={[{ required: true, message: '请选择项目!' }]}>
                        <Select>
                        <Select.Option value={''}></Select.Option>
                        {
                          mimList.map( item =>{
                            return <Select.Option key={item.id} value={item.mimCode}>{item.mimName}</Select.Option>
                          })
                        }
                        </Select>
                    </FormItem>
                </Col>
                <Col className="gutter-row" span={8}>
                    <FormItem label="规格"  {...formItemLayout} name="spec" rules={[{ required: true, message: '请输入规格!' }]}>
                      <Input placeholder="输入规格" />
                    </FormItem>
                </Col>
                <Col className="gutter-row" span={8}>
                    <FormItem label="数量" {...formItemLayout}  name="qty" rules={[{ required: true, message: '请输入数量!' }]}>
                        <Input placeholder="输入数量" />
                    </FormItem>
                </Col>
                <Col className="gutter-row" span={8}>
                    <FormItem label="单位" {...formItemLayout} name="uom" rules={[{ required: true, message: '请选择单位!' }]}>
                        <Select>
                        <Select.Option value={''}></Select.Option>
                        {
                          uomList.map( item =>{
                            return <Select.Option key={item.id} value={item.code}>{item.desc}</Select.Option>
                          })
                        }
                        </Select>
                    </FormItem>
                </Col>
                <Col className="gutter-row" span={8}>
                    <FormItem label="条码" {...formItemLayout} name="barcode">
                      <Input placeholder="输入条码" />
                    </FormItem>
                </Col>
                <Col className="gutter-row" span={8}>
                    <FormItem label="消耗部门"  {...formItemLayout} name="dept" rules={[{ required: true, message: '请选择消耗部门!' }]}>
                        <Select>
                        <Select.Option value={''}></Select.Option>
                        {
                          deptList.map( item =>{
                            return <Select.Option key={item.id} value={item.deptCode}>{item.deptName}</Select.Option>
                          })
                        }
                        </Select>
                    </FormItem>
                </Col>

                <Col className="gutter-row" span={8}>
                    <FormItem label="使用方式"  {...formItemLayout} name="userMethod">
                      <Input placeholder="输入使用方式" />
                    </FormItem>
                </Col>

                <Col className="gutter-row" span={24}>
                    <FormItem label="备注"  labelCol={{span:2}} wrapperCol={{span:22}} name="remark">
                        <TextArea rows={4} showCount maxLength={100}/>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        </Modal>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    uomList:state.stockrequireapply.uomList,
    mimList:state.stockrequireapply.mimList,
    deptList:state.stockrequireapply.deptList,
    dialogVisiable:state.stockrequireapply.dialogVisiable,
    currData:state.stockrequireapply.currData
  }
}

export default connect(mapStateToProps)(StockRequireApplyAddDialog);
